<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { PubSubEnum } from "@/types";
import { useRoute } from "vue-router"; // 引入 useRoute
import { Loading } from "vant";
import PubSub from "pubsub-js";
import { HomeAxios } from "@/api/home.ts";
import { useI18n } from "vue-i18n";
import moment from "moment";
const initListData = ref<any>([]);
const route = useRoute(); // 使用 useRoute 获取当前路由对象
const pGameIDStr = route.query.id as string;
const timeType = route.query.timeType as string;
const params: any = route.query;
const intiType = ref(true);
const { t } = useI18n();
onMounted(async () => {
  getList();
});
const queryParams = reactive({
  pageNo: 1,
  pageSize: 12,
});
const total = ref(0);
const getList = async () => {
  try {
    const res: any = await HomeAxios.queryGameOrderRecordDetail({
      pGameIDStr,
      ...queryParams,
      timeType: Number(timeType) || 1,
    });
    if (res.data.length === 0) {
      PubSub.publish(PubSubEnum.SHOW_SUCCESS_TIP, {
        text: t("systemNotify.noMore"),
      });
      return (loading.value = false);
    }
    total.value = res.total;
    initListData.value = initListData.value.concat(res.data) || [];
    loading.value = false;
    intiType.value = true;
  } catch (error) {
    loading.value = false;
  }
};
const loading = ref(false);
const loadmore = () => {
  loading.value = true;
  queryParams.pageNo += 1;
  getList();
};
</script>

<template>
  <div class="text_color gameDetail transition">
    <!-- 统计数据 -->
    <div class="statistics">
      <div class="img-box">
        <img :src="params.gameLogo" />
      </div>
      <div class="text-box ml-9">
        <div class="highlight text_16 h_52 fl text_16">{{ params.gameName }}</div>
        <div class="h_52 fl text_12">
          {{ t("gameDetail.bet") }} {{ params.vezes }}{{ t("gameDetail.times") }}：
          <div class="highlight text_14">{{ (Number(params.bets) / 100).toFixed(2) }}</div>
        </div>
        <div class="h_52 fl text_12">
          {{ t("gameDetail.winOrLose") }}：
          <div class="text_14">{{ (Number(params.win) / 100).toFixed(2) }}</div>
        </div>
      </div>
    </div>
    <!-- 列表数据 -->
    <div :key="item.id" v-for="item in initListData" class="list px-15">
      <div class="text-box">
        <div class="mb-10 highlight">{{ moment(item.createTime).format("YYYY-MM-DD HH:mm") }}</div>
        <div class="text_13">{{ t("gameDetail.billing") }} {{ (item.bets / 100).toFixed(2) }}</div>
      </div>
      <div class="fl">
        <div class="mr-10 text_17 highlight">{{ (item.win / 100).toFixed(2) }}</div>
        <div class="icon_box" v-if="Number((item.win / 100).toFixed(2)) > 0">
          <img class="icon" src="@/image/new_img/0049_M_jiangbei_hui.png" />
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="fc m-10 h-67" v-if="total > initListData.length && intiType">
      <Loading v-if="loading" />
      <div v-if="!loading" class="text_15" @click="loadmore">{{ t("gameDetail.loadMore") }}</div>
    </div>
    <div class="fc m-10 h-67" v-if="total === initListData.length && intiType">
      <Loading v-if="loading" />
      <div v-if="!loading" class="text_15">{{ t("gameDetail.nomore") }}</div>
    </div>
  </div>
</template>

<style scoped>
.fc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.px-15 {
  padding: 0 30px;
}
.mx-10 {
  margin: 0 20px;
}
.highlight {
  color: #b9b4bc;
}
.text_color {
  color: #7a707f;
}
.mr-10 {
  margin-right: 20px;
}
.mr-20 {
  margin-right: 30px;
}
.mr-9 {
  margin-right: 18px;
}
.ml-9 {
  margin-left: 18px;
}
.mb-10 {
  margin-bottom: 20px;
}
.m-10 {
  margin: 20px;
}
.h-67 {
  height: 137px;
}
.text_17 {
  font-size: 34px;
}
.text_16 {
  font-size: 32px;
}
.text_15 {
  font-size: 30px;
}
.text_13 {
  font-size: 26px;
}
.text_12 {
  font-size: 24px;
}
.h_52 {
  height: 48px;
}

.text-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  /* padding: 0 18px; */
  text-align: left;
}
.gameDetail {
  padding: 37px;
  padding-top: 0;
  font-size: 28px;
}
.list {
  display: flex;
  justify-content: space-between;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.bg-white {
  background-color: white;
}
.statistics {
  /* width: 100%; */
  height: 183px;
  margin-top: 37.5px;
  /* 从上往下的渐变色 #3C2E44 #1D0C26*/
  background: linear-gradient(180deg, #3c2e44 0%, #1d0c26 100%);
  border-radius: 33px;
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  padding: 0 37px;
}
.list {
  height: 150px;
  background-color: #24142d;
  border-radius: 33px;
  margin-top: 23px;
  border: 1px solid #35263d;
}
.img-box {
  width: 116px;
  height: 116px;
}
.img-box img {
  width: 116px;
  height: 116px;
  border-radius: 100%;
}
.fl {
  display: flex;
  align-items: center;
}
.icon_box {
  width: 48px;
  height: 48px;
  border-radius: 0.22rem;
  background-color: #35263d;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon {
  width: 33px;
  height: 33px;
}

/* 定义从下往上的动画 */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(100%);
}
</style>
